<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            border: 0;
            padding: 0;
        }

        img {
            width: 400px;
            height: 300px;
            float: left;
        }

        a {
            /* 去除下划线 */
            text-decoration: none;
        }

        ul li {
            /* 删除小圆点 */
            list-style-type: none;
        }

        .focus {
            width: 400px;
            height: 310px;
        }

        ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 400%;
            clear: both;
        }

        ol {
            clear: both;
            margin-top: 300px;
            margin-left: -10px;
        }

        ol li {
            width: 20px;
            height: 20px;
            background-color: red;
        }

        .focus {
            /* position:relative; */
            width: 440px;
            height: 320px;
            /* overflow: hidden; */
        }
    </style>
</head>

<body>
    <div class="w">
        <div class="main">
            <div class="focus">
                <a href="" class="arrow-l">&lt;</a>
                <a href="" class="arrow-r">&gt;</a>
                <ul>
                    <li>
                        <a href="">
                            <img src="1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="4.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <ol class="circle">
                </ol>
            </div>
        </div>
    </div>
    <script src="animate.js"></script>
    <script>
        // 动态生成小圆圈 
        var focus = document.querySelector('.focus')
        var ul = focus.querySelector('ul')
        var ol = focus.querySelector('.circle')
        for (var i = 0; i < ul.children.length; i++) {
            // 创建一个 li
            var li = document.createElement('li')
            li.setAttribute('index', i)
            // 把li插入ol里面
            ol.appendChild(e4)
            // 节流阀 控制图片变化速度过快
            var flag = true;
            li.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    }
                    this.className = 'current'
                    var index = this.getAttribute('index')
                    var focusWidth = focus.offsetWidth;
                    console.log(focusWidth);
                    console.log(index);
                    animate(ul, -index * focusWidth,function(){
                        flag = true;
                    })
                }
            })
        }
        // 克隆第一张图片到最后
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first)
    </script>
</body>

</html>